<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">添加品牌</h3>
				</div>
				<div class="panel-body">
					<label>
						Id:<input type="text" v-model="id" class="form-control"/>
					</label>
					<label>
						Name:<input type="text" v-model="name" @keyup.enter="add" class="form-control"/>
					</label>
					
					<label>
						<!--vue中绑定方法后可以跟() 进行传参-->
						<input type="button" value="添加"  class="btn btn-primary" @click="add()"/>
					</label>
					<label>
						<!--调用自定义指令:v-focus 获取焦点-->
						关键字搜索:<input type="text" v-fontsize="'30px'" v-fontweight='1000' v-focus v-color="'green'" v-model="keyword" class="form-control"/>
					</label>
				</div>	
			</div>

			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Ctime</th>
						<th>Option</th>
					</tr>
				</thead>
				<tbody>
					<!--
                    	之前，v-for中的数据，都是直接从data上的list中直接渲染过来，
                    	现在,我们自定义一个search方法，同时，把关键字，通过传参的形式，传递给了
                    	search 方法
                    -->
					<tr v-for='item in search(keyword)' :key='item.id'>
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.ctime|dataFormat}}</td>
						<td><a href='#' @click.prevent="del(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		/*
		 * 日期格式化：需要用到过滤器,可以先学习02.过滤器的基本使用
		 */
		Vue.filter("dataFormat",function(dataStr){
			//console.log(dataStr)
			var dt=new Date(dataStr);
			
			/**
			 * SE6 后字符串首尾填充方法：
			 * 		首：String padStart(maxLengths,fileStr) 
			 * 		尾：String padEnd(maxLengths,fileStr) 
			 * 		参数说明：
			 * 			maxLengths:填充后字符串的长度
			 * 			fileStr:不足位进行填充的字符串
			 */
			var y=dt.getFullYear();
			var m=(dt.getMonth()+1).toString().padStart(2,'0');
			var d=dt.getDate().toString().padStart(2,'0');
			var hh=dt.getHours().toString().padStart(2,'0');
			var ss=dt.getSeconds().toString().padStart(2,'0');
			var mm=dt.getMinutes().toString().padStart(2,'0');
			
			//占位符 的使用： 
			return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
		})
		
		/**
		 * 自定义全局指令：
		 * 	使用 Vue.directive() 定义全局指令
		 * 		参数1： 指令的名称，
		 * 			注意：在定义时，指令的名称签名，不需要加 V- 前缀
		 * 				但在调用时，必须在指令名称前，用v-前缀进行调用
		 * 		参数2：是一个对象，这个对象身上,有一些指令相关的函数，
		 * 			这些函数可以在特定的阶段，执行相关的操作
		 */
		//需求：定义一个 v-focus指令,在进入该页面时，获取焦点
		Vue.directive('focus',{
			//注意：函数称为为钩子函数，参数列表参考 https://cn.vuejs.org/v2/guide/custom-directive.html
			//		第一个参数，永远是el，代表被绑定指令的元素，这个el，是一个原生的js对象
			bind:function(){ //每当指令绑定到元素上时，会立即执行这个bind函数，只执行一次
				//在元素刚绑定时，还没有插入到DOM中去，这时，调用focus方法没有用
				//原因：一个元素，只有插入DOM之后，才能获取焦点
				//el.focus()
			},
			inserted:function(el){//元素插入到DOM时，会执行 inserted 函数[触发1次]
				//注意：火狐浏览器无效，要用谷歌测试
				el.focus();
			},
			update:function(el){ //当VNode更新时，会执行update，可能会触发多次
				
			}
		});
		
		//定义一个全局的v-color指令，修改元素样式
		Vue.directive('color',{			
			bind:function(el,binding){ //每当指令绑定到元素上时，会立即执行这个bind函数，只执行一次
				console.log("指令名称:"+binding.name);
				console.log("指令值:"+binding.value);
				console.log("指令原样值:"+binding.expression);
				el.style.color=binding.value;
				//和设置元素样式相关的，放在bind里即可
			},
			inserted:function(el){//元素插入到DOM时，会执行 inserted 函数[触发1次]				
				//和js行为有关的操作，最好放在inserted中去执行
			},
			update:function(el){ //当VNode更新时，会执行update，可能会触发多次
				
			}
		});
		
		var vue = new Vue({
			el: "#app",
			data: {
				keyword:"",
				id:"",
				name:"",
				list:[{
					id: 1,
					name: '刘备',
					ctime: new Date()
				}, {
					id: 2,
					name: '关羽',
					ctime: new Date()
				}, {
					id: 3,
					name: '张飞',
					ctime: new Date()
				}]
			},
			methods: {
				add(){					 
					/*
					 * 注意：在Vue中，已经实现了数据的双向绑定,每当我们修改了
					 * 	date中的数据，Vue会默认监听到数据的改动，自动把最新的
					 * 数据，应用到页面上
					 * 
					 * 双向绑定的指令：
					 * 		v-model
					 * 		v-for
					 */
					var car={id:this.id,name:this.name,ctime:new Date()};
					this.list.push(car);
					this.id=this.name="";
				},
				del(id){
					/**
					 * 假设id 唯一，根据id删除
					 * 	数组方法：
					 * 		some():找到符合要求的结果，retrun true 即可终止循环
					 * 		findIndex(): 找到符合要求的结果， retrun true：返回对应的索引值
					 */
					this.list.findIndex((item,i)=>{
						if(item.id==id) {
							this.list.splice(i,1);
							return true;
						}
					});
					
					
					/*var index=this.list.findIndex(item=>{
						if(item.id==id) return true;
					});
					this.list.splice(index,1);*/
					
				},
				search(keyword){
					/*var newList=[];
					this.list.forEach(item=>{
						if(item.name.indexOf(keyword)!=-1){
							newList.push(item);
						}
					})
					return newList;*/
					
					//第二种方式：
					/*
					 * []:filter 方法，返回符合条件的对象组成新的数组
					 * string：incloudes() 判断字符串包含子字符串
					 */
					return this.list.filter(item=>{
						if(item.name.includes(keyword))
							return item;
					});
				}
			},
			directives:{ //用于定义私有的指令
				//定义方式与全局指令定义方式相同,只作用于该区域
				'fontweight':{
					//设置字体粗细
					bind:function(el,binding){
						el.style.fontWeight=binding.value;
					}
				},
				//指令的简写
				'fontsize':function(el,binding){
					//注意:这个function 等同于 把代码写到 bind 和 update中去
					el.style.fontSize=parseInt(binding.value)+'px';
				}
				
			}
		});
	</script>

</html>